<template>
  <!-- vue3官网卡片按钮 -->
  <div class="card1">
    {{ title }}
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    title: {
      type: String,
      default: "Vue 3",
    },
  },
});
</script>
<style lang="scss" scoped>
.card1 {
  height: 3rem;
  width: 7rem;
  margin: 0px 0.5rem;
  padding: 0.5rem 1rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 6rem;
  background-color: #fbfbfb;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 1rem;
  border: 1px solid #f1f1f1;
  transition: all 0.2s ease-in-out;

  &:hover {
    /* 阴影X偏移量,Y偏移量,模糊半径,扩散半径,颜色 */
    box-shadow: 0 0.9rem 1.6rem -0.9rem #000;
    transform: translateY(-0.15rem);
  }
}
</style>
